<template>
  <div class="page">
    <div class="breadcrumb-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/userCenter' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/order' }">订单</el-breadcrumb-item>
        <el-breadcrumb-item>物流信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="logistics-top td-fcc">
        <img :src="$global.Image.icon_express" />
        <div class="td-f1 td-fc td-fas">
          <div class="logistics-title">物流公司：<span>{{ orderInfo.delivery_name }}</span></div>
          <div class="logistics-title">物流单号：<span>{{ orderInfo.delivery_id }}</span></div>
        </div>
      </div>
      <div class="logistics-ul">
        <div class="logistics-li" v-for="(express, index) in expressList" :key="index">
          <div class="info">{{ express.status }}</div>
          <div class="time">{{ express.time }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div class="nodata" v-if="!expressList.length">
        <img :src="$global.Image.noExpress" />
      </div>
    </div>
    <v-recommend :type="'hot'"></v-recommend>
  </div>
</template>

<script>
import Recommend from "@components/Recommend";
import ClipboardJS from "clipboard";
import { express } from "@api/order";
const NAME = "Logistics";

export default {
  name: NAME,
  components: {
    "v-recommend": Recommend
  },
  data() {
    return {
      id: this.$route.params.id,
      cartInfo: [],
      orderInfo: {},
      expressList: [],
      loaded: false
    };
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.$route.params.id !== this.id) {
        this.id = this.$route.params.id;
        this.getExpress();
      }
    }
  },
  mounted() {
    this.getExpress();
  },
  methods: {
    getExpress() {
      if (!this.id) return this.$dialog.error("订单不存在");
      this.loaded = false;
      express(this.id)
        .then(res => {
          const result = res.data.express.result || {};
          this.cartInfo = res.data.order.cartInfo;
          this.orderInfo = res.data.order;
          this.expressList = result.list || [];
          this.loaded = true;
          this.$nextTick(function() {
            var copybtn = document.getElementsByClassName("copy-data");
            const clipboard = new ClipboardJS(copybtn);
            clipboard.on("success", () => {
              this.$dialog.success("复制成功");
            });
          });
        })
        .catch(e => {
          this.$dialog.error(e.msg || "加载失败");
        });
    }
  }
};
</script>

<style scoped  lang="scss" scoped>
.page{
  padding-bottom: 100px;
}
.logistics-top{
  background-color: #fff6fd;
  padding: 20px;
  img{
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 20px;
  }
  >div{
    height: 60px;
  }
  .logistics-title {
    font-size: 14px;
    color: #666;
    span{
      color: #014a97;
      font-size: 16px;
    }
  }
}
.logistics-ul{
  padding-left: 60px;
  margin-top: 40px;
  position: relative;
  .logistics-li{
    font-size: 14px;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    .time{
      color: #999;
      font-size: 12px;
      margin-top: 10px;
    }
  }
  .logistics-li:after{
    position: absolute;
    top: 5px;
    left: -34px;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 8px;
    background-color: #dbdbdb;
  }
  .logistics-li:first-child{
    color: #014a97;
  }
  .line{
    width: 2px;
    background-color: #dbdbdb;
    position: absolute;
    top: 0;
    bottom: 40px;
    left: 30px;
  }
}
</style>